<template>
  <div class="design">
    <template v-if="formData.advancedConfig?.urlList.length">
      <template v-if="getFileType(src) === 'audio'">
        <audio
          controls
          autoplay
          width="100%"
          height="100%"
          preload="metadata"
          style="background: #000"
          ref="playRef"
        >
          <source :src="src" :type="getMIME(src)" />
        </audio>
      </template>
      <template v-if="getFileType(src) === 'video'">
        <video
          controls
          autoplay
          width="100%"
          height="100%"
          preload="metadata"
          style="background: #000"
          ref="playRef"
        >
          <source :src="src" :type="getMIME(src)" />
        </video>
      </template>
    </template>
    <template v-else>
      <div class="preview-noData">
        {{ formData.name }}
      </div>
    </template>
  </div>
</template>
<script setup>
import { getFileType, getMIME } from '@/utils/index'

let props = defineProps({
  formData: {
    type: Object,
    default: () => {},
  },
})
let { formData } = toRefs(props)
let src = computed(() => {
  return formData.value.advancedConfig.urlList[0].url
})
</script>
<style scoped lang="scss">
.design {
  width: 100%;
  height: 100%;
}
.video {
  width: 100%;
  height: 100%;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.preview-noData {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-weight: bold;
}
</style>
